<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>swap demo</title>

  <link rel="stylesheet" href="../../../demo/demo.css"/>
  <script src="../../../dist/gridstack-all.js"></script>

</head>
<body>
  <div class="container-fluid">
    <h1>Swap collision demo</h1>
    <p>for bugs 141 <b>1094</b> 1534 1605</p>
    <div>
      <a class="btn btn-primary" onClick="addNewWidget()" href="#">Add Widget</a>
      <a class="btn btn-primary" onclick="toggleFloat()" id="float" href="#"></a>
      <a class="btn btn-primary" onclick="toggleMax()" id="max" href="#"></a>
      <a class="btn btn-primary" onclick="toggleBigger()" id="big" href="#"></a>
      with layouts:
      <a class="btn btn-primary" onclick="load(0)" href="#">load 0</a>
      <a class="btn btn-primary" onclick="load(1)" href="#">load 1</a>
      <a class="btn btn-primary" onclick="load(2)" href="#">load 2</a>
      <a class="btn btn-primary" onclick="load(3)" href="#">load 3</a>
      <a class="btn btn-primary" onclick="load(4)" href="#">load 4</a>
      <a class="btn btn-primary" onclick="load(5)" href="#">load web1</a>
      <a class="btn btn-primary" onclick="load(5); loadAdvanced()" href="#">load web2</a>
    </div>
    <br><br>
    <div class="grid-stack"></div>
  </div>
  <script src="../../../demo/events.js"></script>
  <script type="text/javascript">
    let floatButton = document.getElementById('float');
    let maxButton = document.getElementById('max');
    let bigButton = document.getElementById('big');
    let size = 1;
    let layout = 5;

    let opt = {
      float: false,
      cellHeight: 70,
      margin: 5,
      maxRow: 0,
      resizable: {handles: 'sw,w,e,se'}
    };
    let grid = GridStack.init(opt);
    addEvents(grid);

    let items = [[ // load 0
      {x:0, y:0}, {x:0, y:1}, {x:0, y:2},{x:1, y:0}, {x:1, y:1}, {x:1, y:2, /*h:2, w:2*/},
      {x:5, y:0}, {x:4, y:1, w:3, locked: false, _content: 'locked'}, {x:5, y:2},
      {x:7, y:0}, {x:8, y:0}, {x:9, y:0}, {x:7, y:1, w:3}, {x:8, y:2},
      {x:11, y:0}, {x:11, y:1, h:2},
    ], [ // load 1
      {x:1, y:0}, {x:1, y:1, w:2}, {x:1, y:2, h:2}, {x:0, y:4, w:3}, 
      {x:3, y:0, w:3, h:3}, {x:6, y:0},
      {x:7, y:0, w:3}, {x:8, y:1, w:3},
    ], [ // load 2
      {x:1, y:0, w:2}, {x:1, y:1, h:2}, {x:2, y:1}, {x:0, y:3, w:3} , {x:0, y:4},
      // {x:5, y:0, w:2}, {x:6, y:1}, {x:4, y:2, w:3} , {x:5, y:4, h:2}, {x:4, y:4},
    ], [ // load 3
      {x:0, y:0, w:6, h:3, content:'drag down past 2, flickers'}, {x:6, y:0, w:6, h:3}, {x:0, y:3, w:8, h:2}, {x:0, y:5, w:4, h:2},
      // {x:0, y:0, w:1, h:1, content:'drag down past 2'}, {x:1, y:0, w:2, h:1}, {x:0, y:3, w:2, h:1}, {x:0, y:5, w:1, h:1}, // BETTER but quick flicker to end
    ], [ // load 4
      {x:0, y:0, w:6, h:2, content:'drag down past 2, re-orders 3'}, {x:6, y:0, w:6, h:2}, {x:0, y:3, w:8, h:1}, {x:0, y:5, w:4, h:1},
    ],[ // load 5 swap different size
      {x:0, y:0}, {x:1, y:0, w: 2}, {x:3, y:0, w: 2},
      {x:0, y:1}, {x:1, y:1}, {x:2, y:1, w: 2}, {x:4, y:1}, 
      {x:1, y:2, h: 2}, {x:1, y:4}
    ],[ // web1.html demo
      {x:0, y:0, w:4, h:2},
      {x:4, y:0, w:4, h:4, id: 'big'},
      {x:8, y:0, w:2, h:2},
      {x:10, y:0, w:2, h:2},
      {x:0, y:2, w:2, h:2},
      {x:2, y:2, w:2, h:4},
      {x:8, y:2, w:4, h:2},
      {x:0, y:4, w:2, h:2},
      {x:4, y:4, w:4, h:2},
      {x:8, y:4, w:2, h:2},
      {x:10, y:4, w:2, h:2}
    ]];
    items.forEach(layout => {
      let count = 0;
      layout.forEach(n => {n.id = count; n.content = n.content || String(count); count++})
    });
    grid.load(items[layout]);

    addNewWidget = function() {
      let n = {
        x: Math.round(12 * Math.random()),
        y: Math.round(5 * Math.random()),
        w: Math.round(1 + 3 * Math.random()),
        h: Math.round(1 + 3 * Math.random()),
        content: String(grid.engine.nodes.length+1)
      };
      grid.addWidget(n);
    };

    load = function(i) {
      layout = i;
      grid.removeAll();
      grid.load(items[i]);
    }
    loadAdvanced = function() {
      grid.update(grid.engine.nodes[1].el, {locked: true, content:'locked'});
    }
    toggleFloat = function() {
      grid.float(! grid.getFloat());
      floatButton.innerHTML = 'float: ' + grid.getFloat();
    }
    floatButton.innerHTML = 'float: ' + grid.getFloat();

    toggleMax = function() {
      grid.opts.maxRow = grid.engine.maxRow = grid.opts.maxRow ? 0 : 3;
      maxButton.innerHTML = 'Max: ' + grid.opts.maxRow;
    }
    maxButton.innerHTML = 'Max: ' + grid.opts.maxRow;

    toggleBigger = function() {
      size = size === 1 ? 2 : 1;
      setSize(size);
    }
    setSize = function(size) {
      items[layout].sort((a,b) => a.id - b.id);
      items[layout].forEach((n,i) => {
        if (layout === 0 && i<6) {
          n.w = n.h = size;
          n.y = i * size;
          if (n.x) n.x = size;
        } else {
          n.h = size;
        }
      });
      grid.opts.maxRow = grid.engine.maxRow = grid.opts.maxRow ? (size === 1 ? 3 : 6) : 0;
      grid.load(items[layout]);
      bigButton.innerHTML = 'Size: ' + size;
      maxButton.innerHTML = 'Max: ' + grid.opts.maxRow;
    }
    bigButton.innerHTML = 'Size: ' + size;
    if (size !== 1) setSize(size);
  </script>
</body>
</html>
